<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

<!-- <style type="text/css">
	#mycanvas{width: 100px;height: 500px;border: 1px solid #ccc;}
</style> -->

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext("2d");
	context.fillStyle="#eeeeef";
	context.fillRect(0,0,400,400)
	// context.stroke()
	var dx = 150;
	var dy = 150;
	var s = 100;

	context.fillStyle= "rgb(100,255,100)";
	context.strokeStyle = "rgb(0,0,100)";
	var x = Math.sin(0);
	var y = Math.cos(0);
	var dig = 11*Math.PI/15
	for (var i=1; i<=30; i++) {
		var x = Math.sin(i*dig);
		var y = Math.cos(i*dig);
		context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*x)
		// context.lineTo(dx+x*s,dy+y*s);
	}
	context.fill();
	context.stroke();
</script>